Selecting and Manipulating DOM Elements

In this section, you’ll learn how to select and modify HTML elements using JavaScript. The most commonly used methods for selecting elements are getElementById, querySelector, and querySelectorAll.

Selecting Elements with getElementById, querySelector, etc.

1. getElementById: Selects an element based on its id attribute.

   <div id="intro">Hello, DOM!</div>

   const introDiv = document.getElementById("intro");
   console.log(introDiv.textContent);  // Output: Hello, DOM!

2. querySelector: Selects the first element that matches a CSS selector.

   <p class="description">This is a paragraph.</p>

   const description = document.querySelector(".description");
   console.log(description.textContent);  // Output: This is a paragraph.

3. querySelectorAll: Selects all elements that match a CSS selector, returning a NodeList.

   <p class="description">First paragraph.</p>
   <p class="description">Second paragraph.</p>

   const allDescriptions = document.querySelectorAll(".description");
   allDescriptions.forEach((desc, index) => {
     console.log(`Paragraph ${index + 1}: ${desc.textContent}`);
   });
   // Output:
   // Paragraph 1: First paragraph.
   // Paragraph 2: Second paragraph.

Modifying Text Content, Attributes, and Styles

Once elements are selected, you can manipulate their content, attributes, and styles dynamically.

1. Changing Text Content
   The .textContent property lets you change the text inside an element.

   <h1 id="header">Original Header</h1>

   const header = document.getElementById("header");
   header.textContent = "Updated Header";

2. Modifying Attributes
   You can use .setAttribute to update an element's attribute.

   <img id="image" src="old-image.jpg" alt="Old Image">

   const image = document.getElementById("image");
   image.setAttribute("src", "new-image.jpg");
   image.setAttribute("alt", "New Image");

3. Styling Elements with JavaScript
   The .style property allows you to change an element’s CSS styles.

   <div id="styled-box" style="width:100px; height:100px; background-color:lightblue;">Box</div>

   const box = document.getElementById("styled-box");
   box.style.backgroundColor = "salmon";
   box.style.width = "200px";
   box.style.height = "200px";

Practicing with Simple DOM Manipulation Exercises

Here’s a small exercise that combines these methods.

1. HTML Structure:

   <div id="content">
     <h2 id="title">Original Title</h2>
     <button id="change-style">Change Style</button>
     <button id="change-title">Change Title</button>
   </div>

2. JavaScript Code:

   // Select elements
   const title = document.getElementById("title");
   const changeStyleButton = document.getElementById("change-style");
   const changeTitleButton = document.getElementById("change-title");
   
   // Event listener to change styles
   changeStyleButton.addEventListener("click", () => {
     title.style.color = "blue";
     title.style.fontSize = "24px";
   });
   
   // Event listener to change text
   changeTitleButton.addEventListener("click", () => {
     title.textContent = "Title Changed!";
   });

When you click the "Change Style" button, the title’s color and font size will change. When you click "Change Title," the text of the title will update.